<template>
    <d2-container :class="{'page-compact':crud.pageOptions.compact}">
        <d2-crud-x
                ref="d2Crud"
                v-bind="_crudProps"
                v-on="_crudListeners"
                @caseTest="caseTest"
                @showCaseResult="showCaseResult">
            <div slot="header">
                <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"  />
                <el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
                <el-button size="small" type="danger" @click="batchDelete"><i class="el-icon-delete"></i> 批量删除</el-button>
                <el-button size="small" type="success" @click="batchTest" :disabled="!multipleSelection || multipleSelection.length===0"><i class="el-icon-video-camera"></i> 批量测试</el-button>
                <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners"/>
            </div>
            <span slot="PaginationPrefixSlot" class="prefix" >
                <el-button class="square" size="mini" title="批量删除"   @click="batchDelete" icon="el-icon-delete" :disabled="!multipleSelection || multipleSelection.length===0"  />
            </span>
            <div slot="headersFormSlot" slot-scope="scope">
              <div style="width: 90%;margin-left: 0px;margin-top: 0px;">
                <vue-json-editor
                  v-model="scope.form.headers"
                  :showBtns="false"
                  :mode="'code'"
                  lang="zh"
                  style="height: 400px"
                  @json-change="onJsonChange"
                  @json-save="onJsonSave"
                  @has-error="onError"
                />
                <br>
              </div>
            </div>
            <div slot="jsonbodyFormSlot" slot-scope="scope">
                <div style="width: 90%;margin-left: 0px;margin-top: 0px;">
                  <vue-json-editor
                    v-model="scope.form.jsonbody"
                    :showBtns="false"
                    :mode="'code'"
                    lang="zh"
                    style="height: 400px"
                    @json-change="onJsonChange"
                    @json-save="onJsonSave"
                    @has-error="onError"
                  />
                  <br>
                </div>
            </div>
          </d2-crud-x>
        <el-drawer :visible.sync="drawer" :size="1500">
          <div slot="title">
            <span>测试结果</span>
              <el-tag size="small" style="margin-left: 10px">{{
                apiRow.case_name
              }}</el-tag>
          </div>
          <case-result
            style="margin-top: 80px; margin-left: 10px"
            :caseRow="apiRow"
          >
          </case-result>
        </el-drawer>
    </d2-container>
</template>

<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import * as api from './api'
import vueJsonEditor from 'vue-json-editor'
import CaseResult from '@/views/case_info/test_result/index'
export default {
  name: 'case_info',
  components: { vueJsonEditor, CaseResult },
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      drawer: false,
      apiRow: {}
    }
  },
  watch: {
    apiRow () {
      this.doRefresh({ from: 'load' })
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return api.GetList(query)
    },
    addRequest (row) {
      return api.AddObj(row)
    },
    updateRequest (row) {
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    batchDelRequest (ids) {
      return api.BatchDel(ids)
    },
    batchTest () {
      const ids = this.multipleSelection.map(item => item.id)
      this.crud.loading = true
      api.BatchTest(ids).then(res => {
        this.$message.success('批量测试成功')
      }).catch(error => {
        this.crud.loading = false
        this.$message.error('批量测试失败：' + error)
      }).finally(() => {
        this.crud.loading = false
        this.doAfterRefresh()
      })
    },
    infoRequest (row) {
      return api.GetObj(row.id)
    },
    caseTest ({ row }) {
      this.crud.loading = true
      api.caseTest(row.id).then((res) => {
        this.$message.success('测试成功')
      }).catch(error => {
        this.crud.loading = false
        this.$message.error('测试失败：' + error)
      }).finally(() => {
        this.crud.loading = false
        this.doAfterRefresh()
      })
    },
    showCaseResult (scope) {
      this.drawer = true
      this.apiRow = scope.row
    }
  }
}
</script>

<style>
  .jsoneditor-vue { height: 100%; }
</style>
